<template>
  <view class="snowCircle">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="snowCircle-content" :style="[{ top: top + 'px' }]">
      <!-- 轮播图 -->
      <view class="swiper-box">
        <swiper
            class="uni-swiper-wrapper"
            indicator-dots
            circular
            autoplay
            interval="3000" :style="heights">
          <swiper-item
              class="index-swiper-item"
              v-for="(item, index) in circleImageList"
              :key="index">
            <image class="i-image" :src="item.src" mode="aspectFit"></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- 发布人信息-->
      <view class="publisherInfo">
        <!-- 发布人头像-->
        <image class="publisherIcon" mode="scaleToFill" :src="circleDetails.avatar" />
        <text class="publisherName">
          {{ circleDetails.userName }}
        </text>
      </view>
      <!-- 发布日期-->
      <view class="createTime">
        {{ circleDetails.createTime }}
      </view>
      <!-- 内容-->
      <view class="snowCircleContent">
        <view class="snowCircleContent_title">{{ circleDetails.title }}</view>
        <rich-text :nodes="(circleDetails.content)"> </rich-text>
      </view>
    </view>
    <!-- 底部分享-->
    <view class="snowCircle-bottom">
      <view class="snowCircle-bottom-content">
        <view class="contentBox">
          <view class="contentIcon_background">
            <!-- 雪场位置图标-->
            <image class="slopeIcon" mode="scaleToFill" src="../../../static/skiTubing/slopeIcon.png" />
          </view>
          <text class="contentText">{{ circleDetails.slopeName }}</text>
        </view>
		<!--
        <view class="contentBox">
          <view class="contentIcon_background">
     
            <image class="clickNumIcon" mode="scaleToFill" src="../../../static/skiTubing/clickNumIcon.png" />
          </view>
          <text class="contentText">{{ circleDetails.clickNum }}</text>
        </view>
		-->
      </view>
      <view class="snowCircle-bottom-share">
        <button class="ortopShareBtn" open-type="share" hover-class="none">
          <view class="conShare">
            <image class="shareIcon" mode="scaleToFill" src="../../../static/skiTubing/shareIcon.png" />
          </view>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      /* 页面标题*/
      childTitle: '雪圈',
      /* 导航栏高度*/
      top: 150,
	  heights:'height:0rpx',
      /* 雪圈id*/
      circleId: null,
      /* 雪圈详情数据*/
      circleDetails:{},
      /* 雪圈详情图片或视频*/
      circleImageList:[],
    }
  },
  onLoad(options) {
    console.log(">>>>options>>>>",options);
    this.circleId = options.id;
    this.getList();
  },
  methods: {
    onShareAppMessage() {
      return {
        title: this.circleDetails.title,
        imageUrl: this.circleDetails[0].src,
      }
    },
    onShareTimeline() {
      return {
        title: this.circleDetails.title,
        imageUrl: this.circleDetails[0].src,
      }
    },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150;
    },
    // 雪圈详情数据
    getList(){
      let params = {
        circleId: this.circleId
      }

      let _this = this
      wx.request({
        url: this.$httpApi.install.circleDetail,
        method: 'GET',
        data: params,
        success(res) {
          console.log("res>>>>",res.data)
          if (res.data.code === 200){
            _this.circleDetails = res.data.data
            console.log("详情数据>>>>>>",_this.circleDetails);
			// 获取系统信息
	
			
		
			
			
            _this.getImage(_this.circleDetails.titleImg);
          }
        },
      })
    },
    getImage(titleImg){
		
		 let _this = this
		 var _t=0
		 var _r=0
		const systemInfo = wx.getSystemInfoSync();
		
		// 获取屏幕高度
		const screenHeight = systemInfo.windowHeight
		const screenWidth = systemInfo.windowWidth
      let imageList = titleImg.split(";");
      console.log(imageList);
      imageList.forEach((item) => {
		  item=item.replace('http','https')
		  wx.getImageInfo({
		    src: item,
		    success (res) {
		    console.log(res)
				if(res.width>res.height)
				{
						_t=(res.height*screenWidth/res.width).toFixed()*2
						//_this.heights='height:'+(res.height*screenWidth/res.width).toFixed()*2+'rpx'
						console.log(_t)
				}
				else
				{
						_t=(screenHeight/3*2-150).toFixed()*2
						//_this.heights='height:'+(screenHeight/3*2-150).toFixed()*2+'rpx'
						console.log(_t)
				}
				if(_r<_t)
				{
					_r=_t
					console.log(_r)
					 _this.heights='height:'+_r+'rpx'
				}
		    }
		  })
        let itemData = item.split(".");
        _this.circleImageList.push({
          format: itemData[itemData.length - 1],
          src: item
        });
		    
      });
   
    }
  },
}
</script>

<style lang="scss" scoped>
.snowCircle{

  .snowCircle-content {
    position: absolute;
    width: 100%;
    background-color: #F8FAFE;
   // padding: 13rpx 30rpx 0 30rpx;

    // 轮播图
    .swiper-box {
      //margin-top: 20rpx;
      width: 100%;
	   margin:0 0 40rpx 0;

      .uni-swiper-wrapper {
        width: 100%;
     

        /deep/ .wx-swiper-dot {
          // 指示点元素默认样式
          width: 16rpx !important;
          height: 16rpx !important;
          background: #64787b !important;
          border-radius: 50%;
        }

        /deep/ .wx-swiper-dot-active {
          // 指示点元素激活（当前选中）状态样式
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          width: 63rpx !important;
          height: 16rpx !important;
          background-color: #303030 !important;
        }

        .index-swiper-item {
        //  border-radius: 20rpx;

          .i-image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    // 发布人信息
    .publisherInfo{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding-left: 20rpx;
      box-sizing: border-box;

      .publisherIcon{
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        background: #6E6E6E;
        opacity: 1;
        box-sizing: border-box;
      }

      .publisherName{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 80%;
        margin-left: 19rpx;
        font-size: 32rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #303030;
        box-sizing: border-box;
      }
    }

    // 发布日期
    .createTime{
      width: 100%;
      margin-left: 109rpx;
      margin-bottom: 40rpx;
      font-size: 24rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #A4A4A4;
      box-sizing: border-box;
    }

    //  内容
    .snowCircleContent{
      width: 100%;
      min-height: 36vh;
      margin-bottom: 160rpx;
      padding: 30rpx 20rpx 36rpx 20rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      opacity: 1;
      .snowCircleContent_title{
        font-size: 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        color: #303030;
        margin-bottom: 30rpx;
      }
    }
  }

  /* 底部*/
  .snowCircle-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 129rpx;
    background: #FFFFFF;
    border-radius: 0 rpx;
    padding: 0 49rpx 0 30rpx;

    .snowCircle-bottom-content{
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .contentBox{
        position: relative;
        background: #EFF1F4;
        border-radius: 31rpx 31rpx 31rpx 31rpx;
        opacity: 1;
        display: flex;
        align-items: center;

        .contentIcon_background{

          width: 53rpx;
          height: 53rpx;
          background: #303030;
          border-radius: 31rpx 31rpx 31rpx 31rpx;
          opacity: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .slopeIcon{
            width: 24rpx;
            height: 26rpx;
          }

          .clickNumIcon{
            width: 28rpx;
            height: 17rpx;
          }
        }

        .contentText{
          //min-width: 90rpx;
          padding: 0 27rpx 0 10rpx;
          //text-align: center;
          font-size: 24rpx;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          color: #595959;
        }
      }

      .contentBox:nth-child(1) {
        margin-right: 20rpx;
      }
    }

    .snowCircle-bottom-share{
      display: flex;
      align-items: center;
      .shareIcon{
        width: 44rpx;
        height: 44rpx;
      }

      button,button::after {
        width: 50rpx;
        height: 50rpx;
        border: none;
        border-color: transparent;
        margin: 0;
        padding: 0;
        outline: none;
        border-radius: 0;
        background-color: transparent;
        line-height: normal;
        color: transparent;
      }

    }
  }

}
</style>
